<script lang="ts" setup>

</script>

<template>
  <div class="header-container">
    <RouterLink to="/home" custom v-slot="{ navigate, isActive }">
      <div :class="{ active: isActive }" @click="navigate">
        <svg t="1658019460496" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="1406" width="15" height="15">
          <path
            d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
            p-id="1407"></path>
        </svg>
        网站收藏
      </div>
    </RouterLink>

    <RouterLink to="/imggallery" custom v-slot="{ navigate, isActive }">
      <div :class="{ active: isActive }" @click="navigate">
        <svg t="1658019519244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="1558" width="15" height="15">
          <path
            d="M285.696 180.224q21.504 0 40.96 8.192t33.792 22.528 22.528 33.792 8.192 41.984q0 21.504-8.192 40.448t-22.528 33.28-33.792 22.528-40.96 8.192-40.96-8.192-33.792-22.528-22.528-33.28-8.192-40.448q0-22.528 8.192-41.984t22.528-33.792 33.792-22.528 40.96-8.192zM963.584 0q24.576 0 42.496 17.92t17.92 41.472l0 905.216q0 23.552-17.92 41.472t-42.496 17.92l-904.192 0q-24.576 0-41.984-17.92t-17.408-41.472l0-905.216q0-23.552 17.408-41.472t41.984-17.92l904.192 0zM932.864 151.552q0-25.6-17.408-43.52t-43.008-17.92l-721.92 0q-25.6 0-43.008 17.92t-17.408 43.52l0 360.448q0 29.696 14.848 56.32t42.496 47.616 66.56 33.28 87.04 13.312q68.608 1.024 111.104-18.432t73.728-49.152 58.368-64.512 64.512-65.536 92.16-51.712 141.824-22.016q15.36-1.024 17.92-0.512t6.656 0.512 16.896 0.512 48.64-0.512l0-239.616z"
            p-id="1559"></path>
        </svg>
        图片收藏
      </div>
    </RouterLink>
  </div>
</template>

<style lang="stylus">
.header-container
  display flex
  background #1e90ff
  height 44px
  div
    padding-left 10px
    padding-right 20px
    display flex
    justify-content center
    align-items center
    color #ccc
    cursor pointer
    &.active
      color #fff
    svg
      margin-right .2rem
      fill #ccc
    &.active svg
      fill #fff
</style>
